import React,{useState,useEffect} from 'react'
import { useParams } from 'react-router-dom'
import axios from 'axios'
import Tabbar from '../tabbar/index'
export default function Index() {
    const {id}=useParams()
    const [shop,setshop]=useState([])
    useEffect(()=>{
        handleshoplist()
    },[])
    const handleshoplist=async()=>{
        let {data}=await axios.get('http://127.0.0.1:3000/getshoplist/'+id)
        setshop(data.data)
    }
    const handlegouwuche=(id)=>{
        console.log(id);
    }
  return (
    <div>
        <div>
            {
                shop.map(item=>(
                    <div key={item._id}>
                        <div><img style={{width:'100%'}} src={item.imgpath} alt="" /></div>
                        <div>{item.name}</div>
                        <div>{item.price}</div>
                        <div>{item.num}</div>
                        <div>{item.part}</div>
                    </div>

                ))
            }
        </div>
        <div><button onClick={handlegouwuche(id)}>加入购物车</button></div>
        <div style={{position:'fixed',bottom:0,width:'100%'}}>
            <Tabbar></Tabbar>
        </div>
    </div>
  )
}
